<template>
	
<div style="padding: 5% 15%;">
	<el-descriptions
	    class="margin-top"
	    title="基本信息"
	    :column="1"
	    size="large"
	    border
	  >
	    <template #extra>
	      <el-button type="primary" @click="toUpdate">修改信息</el-button>
		  <el-button type="primary" @click="updatePwdDialog = true">修改密码</el-button>
	    </template>
	    <el-descriptions-item>
	      <template #label>
	        <div class="cell-item">
	          账号
	        </div>
	      </template>
	      {{user.account}}
	    </el-descriptions-item>
	    <el-descriptions-item>
	      <template #label>
	        <div class="cell-item">
	          姓名
	        </div>
	      </template>
	      {{user.name}}
	    </el-descriptions-item>
	    <el-descriptions-item>
	      <template #label>
	        <div class="cell-item">
	          邮箱
	        </div>
	      </template>
	      {{user.mail}}
	    </el-descriptions-item>
	    <el-descriptions-item>
	      <template #label>
	        <div class="cell-item">
	          头像
	        </div>
	      </template>
	      <el-avatar :src="imageBaseUrl + user.head" :size="150" fit="fill"/>
	    </el-descriptions-item>
	    <el-descriptions-item>
	      <template #label>
	        <div class="cell-item">
	          注册时间
	        </div>
	      </template>
	      {{formatterTime1(user.createTime)}}
	    </el-descriptions-item>
	  </el-descriptions>
</div>

<el-dialog v-model="updateDialog" title="修改基本信息" destroy-on-close>
  <el-form ref="updateFormRef" :model="updateForm" :rules="updateRules" :label-width="labelWidth">
    <el-form-item prop="account" label="账号">
  	<el-input v-model="updateForm.account" disabled/>
    </el-form-item>
    <el-form-item prop="name" label="姓名">
    		<el-input v-model="updateForm.name" clearable />
    </el-form-item>
    <el-form-item prop="head" label="头像" >
    		<el-upload
    			class="upload-demo"
    			:action="uploadAction"
    			:on-success="uploadSuccess"
    			accept="image/*"
    			with-credentials
    			:limit="1"
    			list-type="picture"
    		  >
    			<el-button type="primary">点击上传</el-button>
    			<template #tip>
    			  <div class="el-upload__tip">
    				jpg/png 图片不能大于 500kb
    			  </div>
    			</template>
    		  </el-upload>
    </el-form-item>
	<el-form-item prop="mail" label="邮箱">
			<el-input v-model="updateForm.mail" clearable />
	</el-form-item>
  </el-form>
  <template #footer>
	<div class="dialog-footer">
	  <el-button @click="updateDialog = false">取消</el-button>
	  <el-button type="primary" @click="doUpdate">修改</el-button>
	</div>
  </template>
</el-dialog>
	
<el-dialog v-model="updatePwdDialog" title="修改密码" destroy-on-close>
  <el-form ref="updatePwdFormRef" :model="updatePwdForm" :rules="updatePwdRules" :label-width="labelWidth">
    <el-form-item prop="password" label="原密码">
    	<el-input type="password" v-model="updatePwdForm.password" clearable show-password />
    </el-form-item>
	<el-form-item prop="newPassword" label="密码">
    	<el-input type="password" v-model="updatePwdForm.newPassword" clearable show-password />
    </el-form-item>
    <el-form-item prop="rePassword" label="确认密码">
    	<el-input type="password" v-model="updatePwdForm.rePassword" clearable show-password />
    </el-form-item>
  </el-form>
  <template #footer>
	<div class="dialog-footer">
	  <el-button @click="updatePwdDialog = false">取消</el-button>
	  <el-button type="primary" @click="doUpdatePwd">修改</el-button>
	</div>
  </template>
</el-dialog>
	
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue"
import { useRouter } from "vue-router"
import { imageBaseUrl, formatterTime1, uploadAction } from "@/global/index.js"
const { proxy } = getCurrentInstance()

let user = reactive({})
const init = () => {
	let loginUser = JSON.parse(sessionStorage.getItem('bbs-web'))
	Object.assign(user, loginUser)
}
init()

let labelWidth = ref(80)
let updateFormRef = ref(null)
let updateDialog = ref(false)
let updateForm = reactive({})
const toUpdate = () => {
	Object.assign(updateForm, user)
	updateDialog.value = true
}
const doUpdate = () => {
  updateFormRef.value.validate(async (valid) => {
    if (!valid) {
      return
    }
    let params = Object.assign({}, updateForm);
    let result = await proxy.axios.post('user/update', params)
    if (!result) {
		return
    }
	updateFormRef.value.resetFields()
	sessionStorage.setItem('bbs-web', JSON.stringify(result))
    proxy.msg.success("修改成功")
    updateDialog.value = false
	init()
  })
}
let updateRules = {
	name: [
	  { required: true, message: "必填项不能为空"},
	],
	mail: [
	  { required: true, message: "必填项不能为空"},
	],
	head: [
	  { required: true, message: "必填项不能为空"},
	],
}

let updatePwdDialog = ref(false)
let updatePwdFormRef = ref(null)
let updatePwdForm = reactive({})
const doUpdatePwd = () => {
  updatePwdFormRef.value.validate(async (valid) => {
    if (!valid) {
      return
    }
    let params = Object.assign({}, updatePwdForm);
    let result = await proxy.axios.post('user/updatePwd', params)
    if (!result) {
		return
    }
    proxy.msg.success("修改成功")
	updatePwdFormRef.value.resetFields()
    updatePwdDialog.value = false
  })
}
let updatePwdRules = {
	password: [
	  { required: true, message: "必填项不能为空"},
	],
	newPassword: [
	  { required: true, message: "必填项不能为空"},
	],
	rePassword: [
	  { required: true, message: "必填项不能为空"},
	],
}

const uploadSuccess = (response, uploadFile, uploadFiles) => {
	if (response.code !== 0) {
		this.msg.error(response.msg)
	} else {
		updateForm.head = response.data
	}
}
</script>

<style>
</style>